<template>
  <div :class="['h-list-item', `h-list-item--${theme}`, `h-list-item-${type}`, hideRight ? 'hideRight' : '', `h-list-item-${articleType}` ,`h-list-item--area${isPing}`, hideFooter ? 'h-list-item-bottom' : '', hideRight ? 'h-list-item-hideRight' : '']">
    <div class="title">
      <div :class="['h-list--order', `h-list--order-${order}`]" v-if="!hideOrder && (type == 'hot' || type == 'important')">
        <svg-icon iconClass="hg" v-if="order <= 3 && type == 'hot'"></svg-icon>
        <div class="h-list--order-text">{{ order }}</div>
      </div>

      <a-dropdown :trigger="['contextmenu']">
        <div style="width: 100%">
          <h1 @click="$emit('detail')" :class="['h1', `h1-${type}`, type == 'article' && theme != 'dark' ? 'ellipsis-2' : 'ellipsis', `h1-${order}`]">
            <div v-if="type == 'single-tag'" class="single-tag" :style="{color: simpleTagColorType[simpleTagColor] || simpleTagColor, borderColor: simpleTagColorType[simpleTagColor] || simpleTagColor}">
              <div>
                {{ simpleTagName }}
              </div>
            </div>
            <span v-if="type == 'important' && theme == 'dark'">
              <span style="font-size: 14px">
                <a-popover placement="topLeft" v-if="!hideToolTip">
                  <template slot="content">
                    <div style="max-width: 200px">
                      {{ account }}
                    </div>
                  </template>
                  {{ account }}
                </a-popover>
                <template v-else>
                  {{ account }}
                </template>
              </span>
              <a-divider type="vertical"></a-divider>

              {{ source }}
              <span>{{ fansNum | hotFilter }}</span>粉丝
              <a-divider type="vertical"></a-divider>
              <span>{{ commentNum | hotFilter }}</span>评论
              <a-divider type="vertical"></a-divider>
              <span>{{ likeNum | hotFilter }}</span>点赞
              <span>{{ createTime }}</span>
            </span>

            <span v-else-if="type == 'important'">
              <span style="font-size: 14px">
                <a-popover placement="topLeft" v-if="!hideToolTip">
                  <template slot="content">
                    <div style="max-width: 200px">
                      {{ account }}
                    </div>
                  </template>
                  {{ account }}
                </a-popover>
                <template v-else>
                  {{ account }}
                </template>
              </span>
              <a-divider type="vertical"></a-divider>
              <span style="color: #1F3B8A">{{ tag }}</span>

            </span>
            <span :class="[`span-${type}`]" v-else>
              <a-popover placement="topLeft" v-if="!hideToolTip">
                <template slot="content">
                  <div style="max-width: 300px">
                    {{ title | htmlFilter }}
                  </div>
                </template>
                <template v-if="showLeftTime">
                  <span class="smallTime">{{ createTime }}</span><span style="margin-left: 4px;margin-right: 4px;font-size: 13px" class="red" v-if="showTitleSource">{{ source }}</span>
                </template>
                <span class="ellipsis" style="font-size: 13px">{{ title | htmlFilter }}</span>
              </a-popover>
              <template v-else>
                <span class="red" v-if="showTitleSource">{{ source }}</span>{{ title | htmlFilter }}
              </template>
            </span>
            <span class="others-detail" v-if="type == 'others'" @click="$emit('detail')">查看详情 ></span>
            <svg-icon class="zd-icon" iconClass="zd" v-if="type == 'datas' && order == 1"></svg-icon>
            <img
              class="zd-icon"
              width="20px"
              v-if="sortName == '杭州亚运'"
              :src="require('@/assets/Image/yy.png')"
              alt=""
              style="transform: translate(0, 10px);">
          </h1>

          <template v-if="!hideFooter">
            <div
              :class="['h-list-item--footer', `h-list-item--footer-${order}`]"
              v-if="type == 'hot' || type == 'article' || type == 'datas' ">
              <span v-if="type == 'article'">文章来源：{{ source }}</span>
              <span class="ellipsis" v-else-if="type == 'datas'">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <div style="max-width: 300px">
                      所属地：{{ address }}{{ }}
                    </div>
                  </template>
                  所属地：{{ address }}
                </a-popover>
              </span>
              <span v-else>{{ createTime }}</span>

              <span v-if="type == 'datas'"></span>
              <span v-else-if="type == 'hot'" style="font-size: 14px">
                {{ hotNum }}
              </span>
              <span v-else-if="type == 'article'">
                {{ item.topicName }}
                <!-- {{ readNum > 99 && hideMore ? '99+' : readNum }}阅读
                <a-divider type="vertical"></a-divider>
                {{ likeNum > 99 && hideMore ? '99+' : likeNum }}点赞
                <a-divider type="vertical"></a-divider>
                {{ commentNum > 99 && hideMore ? '99+' : commentNum }}评论
                <a-divider type="vertical"></a-divider>
                {{ transNum > 99 && hideMore ? '99+' : transNum }}转发 -->
              </span>
            </div>
            <div class="h-list-item--footer ellipsis" v-else-if="type == 'important' && theme == 'dark'">
              <span :style="{color: theme == 'dark' ? '#5DA2F4' : '#1F3B8A'}">{{ tag }}</span>
            </div>
            <div class="h-list-item--footer ellipsis" v-else-if="type == 'important'">
              {{ source }}
              <span>{{ fansNum | hotFilter }}</span>粉丝
              <a-divider type="vertical"></a-divider>
              <span>{{ commentNum | hotFilter }}</span>评论
              <a-divider type="vertical"></a-divider>
              <span>{{ likeNum | hotFilter }}</span>点赞
              <span>{{ createTime }}</span>
            </div>

            <div class="h-list-item--footer" v-else-if="type == 'others'">
              <div class="ellipsis-2">
                {{ desc || '无' }}
              </div>
              <!-- <div class="more-news primary">
                更多资讯 >
              </div> -->
              <div :class="['h-list-item-others-btn', `h-list-item-others-btn-${order}`]">
                <svg-icon class="icon-createTime" iconClass="time"></svg-icon>
                <span>已持续</span><span>{{ keepTime }}</span><span>h</span>
              </div>
            </div>

            <div class="h-list-item--footer ellipsis-2" v-else-if="type == 'comment'">
              <div>
                {{ desc }}
              </div>
            </div>
          </template>
        </div>
        <a-menu size="small" slot="overlay" v-if="type == 'article'">
          <a-menu-item key="1" @click="$emit('addWatch')">
            添加文章监控
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <!-- 右上脚侧 -->
    <template v-if="!hideRight">
      <div class="right-solt createTime" v-if="(type == 'default' && !showTitleSource) || type == 'single-tag' || type == 'comment' || type == 'article' || type == 'datas'">{{ createTime }}</div>
      <div class="right-solt createTime" v-else-if="type == 'hot'"><span style="color: red">{{ source }}</span></div>
      <div :class="['right-solt', 'createTime', `right-solt-${order}`]" v-else-if="type == 'others'">开始时间<a-divider type="vertical"></a-divider>{{ createTime }}</div>
    </template>

    <!-- 页脚 -->
    <div class="h-list-item--footer" v-if="type == 'default' && !hideFooter">
      <!-- <span>{{ createTime }}</span> -->
      <!-- <a-divider type="vertical"></a-divider>
      <span>{{ account }}</span> -->
      <div class="h-list-item--cz" v-show="!hideAction && isHandle !== 1" >
        <a-dropdown :trigger="['click']">
          <div><img :src="require('@/assets/Image/handclick.png')" width="12px" alt="" />进行处置</div>
          <template #overlay>
            <a-menu>
              <a-menu-item key="0">
                <a @click="$emit('handle')">处置事件</a>
              </a-menu-item>
              <a-menu-item key="0">
                <a @click="$emit('handle3')">观察事件</a>
              </a-menu-item>
<!--              <a-menu-item key="1">-->
<!--                <a-popconfirm-->
<!--                  title="确定要观察事件吗？"-->
<!--                  ok-text="确定"-->
<!--                  cancel-text="取消"-->
<!--                  @confirm="$emit('handle2')"-->
<!--                >-->
<!--                  观察事件-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <div class="h-list-item--cz" v-show="!hideAction && isHandle === 1" >已处置</div>
    </div>
  </div>
</template>
<script>
import SvgIcon from '../../SvgIcon.vue';

export default {
  components: { SvgIcon },
  name: 'HListItem',
  props: {
    // default single-tag hot important article datas others comment
    type: {
      type: String,
      default: 'default'
    },
    hideToolTip: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    showTitleSource: {
      type: Boolean,
      default: false
    },
    hideAction: {
      type: Boolean,
      default: false
    },
    hideOrder: {
      type: Boolean,
      default: false
    },
    isHandle: {
      type: Number,
      default: 0
    },
    hideRight: {
      type: Boolean,
      default: false
    },
    hideMore: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '员工的工伤保险赔偿 竟然也敢截留竟然也敢截留'
    },
    source: {
      type: String,
      default: '微博'
    },
    articleType: {
      type: String,
      default: ''
    },
    account: {
      type: String,
      default: '宁波日报'
    },
    createTime: {
      type: String,
      default: '2022-02-02 20:00'
    },
    simpleTagName: {
      type: String,
      default: '市级'
    },
    simpleTagColor: {
      type: String,
      default: 'primary'
    },
    order: {
      type: Number,
      default: 4
    },
    readNum: {
      type: Number,
      default: 1
    },
    likeNum: {
      type: Number,
      default: 1
    },
    commentNum: {
      type: Number,
      default: 1
    },
    transNum: {
      type: Number,
      default: 1
    },
    fansNum: {
      type: Number,
      default: 1
    },
    tag: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    sortName: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'light'
    },
    keepTime: {
      type: [String, Number],
      default: ''
    },
    hotNum: {
      type: [String, Number],
      default: ''
    },
    isPing: {
      type: [String, Number],
      default: ''
    },
    showLeftTime: {
        type: Boolean,
      default: false
    }
  },
  data() {
    return {
      simpleTagColorType: {
        'primary': '#2381FE',
        'success': '#1FAF7A',
        'danger': '#FE2323'
      }
    };
  }
};
</script>
<style lang="less" scoped>
.h-list-item {
  position: relative;
  // padding: 12px 0;
  box-sizing: border-box;
  margin-bottom: 17px;
  &.h-list-item-bottom {
    margin-bottom: 18px;
    h1.h1 {
      margin-bottom: 0;
    }
  }
  &.h-list-item-hideRight {
    h1.h1 {
      width: 100% !important;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .title {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
  }
  .h-list--order {
    width: 16px;
    flex-basis: 16px;
    flex-shrink: 0;
    font-size: 24px;
    text-align: center;
    position: relative;
    margin-top: -2px;
    .svg-icon {
      margin-left: -2px;
    }
    &.h-list--order-1 {
      color: rgb(255,204,7);
    }
    &.h-list--order-2 {
      color: rgb(204,204,204);
    }
    &.h-list--order-3 {
      color: rgb(197,142,76);
    }
    &.h-list--order-1,&.h-list--order-2,&.h-list--order-3 {
      .h-list--order-text {
        color: #fff;
        position: absolute;
        bottom: 1px;
        left: 50%;
        transform: translate(-30%, 0);
      }
    }

    .h-list--order-text {
      color: #333;
      font-size: 15px;
      text-align: center;
      // font-weight: bold;
    }
  }
  h1.h1 {
    width: 60%;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    line-height: 18px;
    margin: 0;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: #3F8CFF !important;
    }
  }
  &.h-list-item-default {
    margin-bottom: 8px;
    h1.h1 {
      margin-bottom: 4px;
      width: 79%;
    }
  }
  .createTime {
    font-size: 13px;
    font-weight: 400;
    color: #7A879C;
    position: absolute;
    right: 0;
    top: 0;
  }
  span.red {
    color: #EF0B0B;
  }

  .h-list-item--footer {
    font-size: 15px;
    font-weight: 400;
    position: relative;
    > span:first-child {
      // color: #EF0B0B;
      font-size: 13px;
      color: #7A879C;
    }
    > span:last-child {
      color: #B5B8C5;
    }
    .h-list-item--cz {
      min-width: 72px;
      height: 22px;
      background: #EBEFF4;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 500;
      color: #7A879C;
      line-height: 22px;
      text-align: center;
      position: absolute;
      right: 0;
      top: -22px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background: #d7dadf;
        color: #546683;
      }
      img {
        // position: absolute;
        // left: -24px;
        // height: auto;
        height: 16px;
        margin-top: -5px;
        margin-right: 4px;
      }
    }
  }
  .single-tag {
    min-width: 29px;
    height: 14px;
    border: 1px solid #1FAF7A;
    font-size: 20px;
    font-weight: 400;
    color: #1FAF7A;
    line-height: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 2px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 12px;
    // margin-right: 18px;
    // transform: scale(0.5);
    >div {
      margin: 0 auto;
      transform: scale(0.8);
      margin-top: -1px;
    }
  }

  &.h-list-item-single-tag {
    h1.h1 {
      margin-left: 40px;
      font-size: 15px;
      width: 68%;
      margin-bottom: 3px;
    }

    @media (max-width: 1600px) {
      .right-solt {
        font-size: 12px;
      }
    }
  }

  &.h-list-item-hot {
    width: 102%;
    margin-left: -1%;
    margin-bottom: 25px;
    // background: rgba(246, 8, 8, 0.05);
    padding: 4px 8px;
    box-sizing: border-box;
    margin-bottom: 6px;
    &.h-list-item--area1 {
      background: rgba(246, 8, 8, 0.05);
    }
    .title {
      overflow: hidden;
    }
    .ant-divider-vertical {
      margin: 0 3px;
    }
    h1.h1 {
      margin-left: 12px;
      font-size: 16px;
      width: 60%;
    }
    &.hideRight {
        h1.h1 {
           width: 90% !important;
        }

      }
    h1.h1-hot {
      width: 70% !important;

      // text-overflow: clip;
      overflow: hidden;
      margin-bottom: 0;
    }
    .span-hot {
      display: block;
      span {
        width: 100%;
        // overflow: hidden;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &.ellipsis {
          width: 100%;
        }
        span {
          display: block;
        }
      }
    }
    .createTime {
      right: 8px;
      top: 8px;
    }
    .h-list-item--footer {
      width: 100%;
      text-indent: 12px;
      font-size: 12px;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      >span:first-child {
        color: rgba(122, 135, 156, 1);
        white-space: nowrap;
        display: block;
      }
      >span:last-child {
        text-align: right;
        white-space: nowrap;
        text-indent: 0;
        display: block;
      }

    }

    @media (max-width: 1600px) {
      .right-solt {
        font-size: 12px;
      }
    }
  }

  &.h-list-item-important {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 8px;
    margin-bottom: 8px;
    .ant-divider-vertical {
      margin: 0 3px;
    }
    .h-list-item--footer {
      font-size: 12px;
      margin-left: 12px;
      margin-top: 4px;
      width: 86%;
      span {
        color: rgba(31, 59, 138, 1);
      }
    }
    .h-list--order-text {
      color: #fff;
      font-size: 15px;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      background: #36414F;
      line-height: 20px;
      // font-weight: bold;
    }
    .h-list--order-1 {
      .h-list--order-text {
        background: #E19F29;
      }

    }
    .h-list--order-2 {
      .h-list--order-text {
        background: #85939F;
      }
    }
    .h-list--order-3 {
      .h-list--order-text {
        background: #B46949;
      }
    }
    .h-list--order-4 {
      .h-list--order-text {
        background: #36414F;
      }
    }
    .title {
      // height: 23px;
    }
    .h-list--order {
      height: 20px;
    }
    h1.h1 {
      margin-bottom: 0;
      margin-left: 9px;
      width: 100%;
      > span {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        >span {
          color: #333;
          // font-size: 14px;
        }
      }
    }

    &.h-list-item--dark {
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-color: #353750 !important;
      &:last-child {
        border: none;
      }
      &:first-child {
        margin-top: 6px;
      }
      h1.h1 {
        margin-bottom: 0;
        margin-left: 9px;
        width: 100%;
        color: #fff;
        margin-left: 16px;
        font-size: 12px;
        margin-bottom: 4px;
        span {
          font-size: 12px;
        }
        > span {
          color: #A0A0A0;
          font-size: 12px;
          >span {
            color: #fff;
            // font-size: 14px;
          }
        }
      }
      .createTime {
        color: #A0A0A0;
      }
      .h-list-item--footer {
        margin-left: 16px;
        margin-top: 4px;
        >span {
          color: #5DA2F4;
        }
      }
    }
  }

  &.h-list-item-article {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 8px;
    margin-bottom: 11px;

    &.h-list-item-article2 {
      padding-bottom: 5px;
      margin-bottom: 5px;
    }
    &.h-list-item--dark {
      border-color: #353750 !important;
      h1.h1 {
        color: #fff;
      }
      .h1-article {
        height: 15px;
      }
      .h-list-item--footer {
        // margin-left: 16px;
        // margin-top: 4px;
        >span {
          color: #fff;
          opacity: 0.8;
        }
        >span:first-child {
          color: rgb(93, 162, 244) !important;
          opacity: 1;
        }
      }
    }
    h1.h1 {
      margin-bottom: 0;
      margin-left: 0;
      width: 80%;
      font-size: 12px;
    }
    .h1-article {
      // height: 34px;
    }
    .ant-divider-vertical {
      margin: 0 3px;
    }
    .h-list-item--footer {
      width: 100%;
      // margin-left: 12px;
      font-size: 12px;
      margin-top: 4px;
      display: flex;
      justify-content: space-between;
      >span:first-child {
        color: #1F3B8A;
      }
    }
  }

  &.h-list-item-datas {
    margin-bottom: 8px;
    margin-left: -8px;
    padding-top: 8px;
    padding-bottom: 0;
    &:not(:first-child) {
      border-top: 1px solid #e9e9e9;
    }
    h1.h1 {
      margin-bottom: 6px;

      width: 80%;
      font-size: 15px;
      text-indent: 24px;
      &.h1-1 {
        color: #F61313;
      }
    }
    .h-list-item--footer {
      width: 100%;
      // margin-left: 12px;
      text-indent: 24px;
      font-size: 15px;
      margin-top: 4px;
      display: flex;
      justify-content: space-between;
      >span:first-child {
        font-size: 14px;
        color: rgba(122, 135, 156, 1);
      }
      &.h-list-item--footer-1 {
        >span {
          color: #F61313;
        }
      }
    }
    .zd-icon {
      position: absolute;
      left: 0;
      top: 11px;
      color: red;
      font-size: 20px;
    }
  }

  &.h-list-item-others {
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s;
    padding-bottom: 8px;
    padding-right: 8px;

    .createTime {
      top: 6px;
      right: 8px;
    }
    &:hover {
      background: rgba(226, 12, 12, 0.05);
    }
    .span-others {
      max-width: 65%;
      display: inline-block;
      // white-space: normal;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      // pointer-events: all;
    }
    @media (max-width: 1600px) {
      .span-others {
        max-width: 55%;
      }
    }
    // margin-left: -8px;
    .ant-divider-vertical {
      margin: 0 3px;
    }
    .h-list-item--footer {
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #0A1629;
      line-height: 22px;
      position: relative;
      height: 42px;
      >div {
        width: 67%;
      }
      .more-news {
        position: absolute;
        right: 110px;
        font-size: 14px;
        display: inline-block;
        top: 10px;
        width: 100px;
        color:#3F8CFF;
      }
      .h-list-item-others-btn {
        width: auto;
        min-width: 105px;
        height: 34px;
        background: #F4F9FD;
        // opacity: 0.1;
        border-radius: 4px;
        position: absolute;
        right: 0;
        bottom: 4px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0 7px;
        box-sizing: border-box;
        color: #7D8592;
        font-size: 12px;
        .svg-icon {
          // color: #7D8592;
          font-size: 15px;
        }
        >span {

        }
        >span:nth-child(2) {
          transform: scale(0.9);
          margin-left: 6px;
        }
        >span:nth-child(3) {
          font-size: 22px;
          transform: translate(0, -3px);
        }
        >span:nth-child(4) {
          margin-left: 0;
        }

      }
    }

    &.actives {
      color: #E20C0C;
      // background: rgba(226, 12, 12, 0.1);
      position: relative;
      background: rgba(226, 12, 12, 0.05);
      .right-solt {
        color: #E20C0C;
      }
      .h-list-item-others-btn {
        color: #E20C0C;
        background: rgba(226, 12, 12, 0.1);
      }
      h1.h1 {
        &::before {
          content: ' ';
          width: 4px;
          height: 100%;
          background: #E20C0C;
          border-radius: 1px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
    h1.h1 {
      margin-bottom: 0;
      margin-left: 20px;
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      color: #0A1629;
      line-height: 18px;
      margin-top: 4px;
      pointer-events: none;
      &:hover {
        color: #0A1629 !important;
      }
      .others-detail {
        color: #1F3B8A !important;
        pointer-events: all;
        margin-left: 8px;
        font-size: 14px;
        transform: translate(0, -6px);
        display: inline-block;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  &.h-list-item-comment {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 8px;
    margin-bottom: 8px;
    .createTime {
      top: -2px;
    }
    h1.h1 {
      margin-bottom: 3px;
      font-size: 14px;
      font-weight: bold;
      width: 70%;
    }
    .h-list-item--footer {
      font-size: 13px;
    }
  }
}

.smallTime {
  font-size: 12px;
  color: #7A879C;
  margin-right: 4px;
}
</style>

<style lang="less">
.h-list-item {
  .ant-dropdown-trigger {
    overflow: hidden;
  }
}

</style>
